<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :selectPer="'xsck:page'"
        @search="search"
        :showSearchButton="true"
      >
        <el-input
          v-model="form.code"
          clearable
          placeholder="请输入订单编号"
          style="width: 200px;margin-bottom: 20px;"
        />
        <el-input
          v-model="form.clientName"
          clearable
          placeholder="请输入客户姓名"
          style="width: 200px"
        />
        <el-input
          v-model="form.sellUserName"
          clearable
          placeholder="请输入销售顾问"
          style="width: 200px"
        />
        <el-input
          v-model="form.vin"
          clearable
          placeholder="请输入车架号"
          style="width: 200px"
        />
        <CarModel
          style="width: 350px"
          v-model="modelList"
          ref="carModel"
        />
        <el-date-picker
          v-model="form.inTime"
          type="datetimerange"
          start-placeholder="下单日期"
          end-placeholder="下单日期"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-date-picker
          v-model="form.outTime"
          type="datetimerange"
          start-placeholder="预计交车日期"
          end-placeholder="预计交车日期"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @row-dblclick="handleDetails"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="修改"
            style="margin-left: 15px; cursor: pointer"
            v-permission="'xsck:save'"
            @click="updateUser(row)"
          ></i>
          <i
            class="el-icon-s-unfold"
            title="确认出库信息"
            style="margin-left: 15px; cursor: pointer"
            v-permission="'xsck:sh'"
            @click="handleConfirm(row)"
          ></i>
        </template>
      </data-table>
      <el-dialog
        title="确认出库"
        :visible.sync="visible"
        width="35%"
        :before-close="handleClose">
        <el-form ref="ruleform" :model="ruleForm" label-width="80px">
          <el-form-item label="审核状态">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="0">通过</el-radio>
              <el-radio label="1">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" placeholder='请输入' :autosize="{ minRows: 4, maxRows: 4}" v-model="ruleForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handeleOk">确 定</el-button>
        </span>
      </el-dialog>
      <detailsDialog :dialog-visible="dialogVisible" @set-visible="setVisible" :ruleFormDialog="ruleFormDialog"/>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { CarModel } from '@/components/index'
import detailsDialog from './components/detailsDialog'
import {
  getList,
  appval
} from '@/api/pre-sale/newCarStock/salePutOut'
import { getDict } from '@/utils/index'

export default {
  components: {
    CarModel,
    detailsDialog
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map((data) => {
          data.brandSeriesModel = data.carBrandName + '/' + data.carSeriesName + '/' + data.carModelName
          data.colorMerge = data.outColor + '/' + data.inColor + '/' + data.roofColor
          return data
        })
      }
    })
  ],
  data() {
    return {
      ruleFormDialog: {},
      dialogVisible: false,
      ruleForm: {
        status: '0',
        remark: ''
      },
      visible: false,
      tableDataTwo: [],
      modelList: [],
      sourceCode: '',
      getDict: getDict,
      form: {
        brandId: '',
        seriesId: '',
        modelId: ''
      },
      tableColumnAttributes: [
        {
          name: '销售门店',
          value: 'storeName',
          type: 'text'
        },
        {
          name: '出库单号',
          value: 'code',
          type: 'text'
        },
        {
          name: '新车订单号',
          value: 'xcCode',
          type: 'text'
        },
        {
          name: '客户姓名',
          value: 'clientName',
          type: 'text'
        },
        {
          name: '车架号',
          value: 'vin',
          type: 'text'
        },
        {
          name: '品牌/车系/车型',
          value: 'brandSeriesModel',
          type: 'text'
        },
        {
          name: '供应商',
          value: 'supplierName',
          type: 'text'
        },
        {
          name: '车身色/内饰色/车顶色',
          value: 'colorMerge',
          type: 'text'
        },
        {
          name: '销售类型',
          value: 'sellType',
          type: 'text',
          dict: '销售类型'
        },
        {
          name: '销售渠道',
          value: 'sellDitch',
          type: 'text'
        },
        {
          name: '总计合计（元）',
          value: 'amount',
          type: 'text'
        },
        {
          name: '订单日期',
          value: 'orderTime',
          type: 'text'
        },
        {
          name: '预计交车日期',
          value: 'yujcrq',
          type: 'text'
        },
        {
          name: '销售顾问',
          value: 'sellUserName',
          type: 'text'
        },
        {
          name: '出库仓位',
          value: 'storageSiteName',
          type: 'text'
        },
        {
          name: '出库状态',
          value: 'status',
          type: 'text'
        },
        {
          name: '审核状态',
          value: 'reviewStatus',
          type: 'text'
        }
      ],
      dict: {}
    }
  },
  methods: {
    setVisible(val) {
      this.dialogVisible = val
    },
    handleDetails(row) {
      this.dialogVisible = true
      this.ruleFormDialog = {
        ...row
      }
    },
    // 修改
    updateUser(row) {
      this.$router.push({
        path: 'editSalePutOut',
        query: { id: row.id }
      })
    },
    // 确认出库订单号
    handleConfirm(row) {
      this.visible = true
      this.sourceCode = row.code
    },
    async handeleOk(row) {
      await appval({
        sourceCode: this.sourceCode,
        ...this.ruleForm
      }).then(res => {
        const { success } = res
        if (success) {
          this.$message.success('审核成功')
          this.visible = false
          this.setTableData()
        }
      })
    },
    handleClose() {
      this.visible = false
    },
    // 查询
    search(form) {
      if (this.modelList.length > 0) {
        form.carBrandId = this.modelList[0]
        form.seriesId = this.modelList[1]
        form.modelId = this.modelList[3]
      } else {
        form.carBrandId = ''
        form.seriesId = ''
        form.modelId = ''
      }
      if (form.inTime && form.inTime.length > 0) {
        form.xdStartTime = form.inTime[0]
        form.xdEndTime = form.inTime[1]
      } else {
        form.xdStartTime = ''
        form.xdEndTime = ''
      }
      if (form.outTime && form.outTime.length > 0) {
        form.jcStartTime = form.outTime[0]
        form.jcEndTime = form.outTime[1]
      } else {
        form.jcStartTime = ''
        form.jcEndTime = ''
      }
      delete form.inTime
      delete form.outTime
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    }
  }
}
</script>
